<template>
    <div class="Content">
        <el-tabs v-model="activeName" @tab-remove="closeTag" @tab-click="handleClick" type="border-card" style="min-height: 800px;">
            <el-tab-pane v-for="item in editableTabs" :label="item.title" :name="item.name" :key="item.name" :MenuIndex="item.MenuIndex" closable>
                <iframe :src="item.content" class="PlatIframe"></iframe>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    module.exports = {
        data: function () {
            return{
                activeName: 'desktop',
                editableTabs: [
                    {title: '基础桌面', name: 'desktop',content:'desktop.html',closable:false,MenuIndex:'0'},
                    ],
                tabIndex: 1,
            }
        },
        mounted:function(){

        },
        watch:{
            "$route":function(){

            },
        },
        methods:{
            handleClick:function(tab,event) {
                let currentTab=this.editableTabs.filter(function (tab1) {
                    return tab1.name===tab.name;
                });
                console.log(currentTab[0].MenuIndex);
                this.$emit("change-menu",currentTab[0].MenuIndex);
            },
            closeTag:function (name) {
                let tabs = this.editableTabs;
                let activeName = this.activeName;
                let activeMenu = this.activeMenu;
                if (activeName === name) {
                    tabs.forEach(function(tab, index){
                        if (tab.name === name) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                                activeMenu = nextTab.MenuIndex;
                            }
                        }

                    });
                }
                this.activeName = activeName;
                this.$emit("change-menu",activeMenu);

                /*新版浏览器*/
                //this.editableTabs = tabs.filter(tab => tab.name !== name);
                this.editableTabs = tabs.filter(function(tab){return tab.name!==name});

                /*IE6,7,8*/
                //this.editableTabs = tabs.MyFilter(function (tab) {return tab.name!==name;});
            },
            addTab:function(tabName,targetName,url,MenuIndex) {
                if(tabName==null||tabName==undefined||tabName==''){
                    tabName=++this.tabIndex + '';
                }
                let arr = this.editableTabs.filter(function (item) {
                    return item.name===tabName;
                });
                if(arr.length===0){
                    this.editableTabs.push({
                        title: targetName,
                        name: tabName,
                        content: url,
                        MenuIndex:MenuIndex,
                    });
                    this.activeName = tabName;
                }else{
                    let keyIndex=arr.length;
                    let arr1=this.editableTabs.filter(function (item) {
                        return item.name===tabName+""+keyIndex
                    })
                    if(arr1.length===0){
                        this.editableTabs.push({
                            title: targetName+""+keyIndex,
                            name: tabName+""+keyIndex,
                            content: url,
                            MenuIndex:MenuIndex+1,
                        });
                    }else{
                        this.$message.error("最多打开两个相同窗口");
                    }
                    this.activeName = tabName+""+keyIndex;
                }
            },
        }
    }
</script>
<style>
    .Content{
        flex:1;
        min-height: 800px;
    }
    .el-tabs--border-card>.el-tabs__content{
        padding: 0px;
    }
    .PlatIframe{
        width: 100%;
        min-height: 800px;
        border:0px;
        overflow-x:hidden;
    }
</style>